<div id="timeline" class="video-timeline">

  <div class="timeline-control">
    <div class="zoom-title">
      <label translate>VIDEO_TOOL.TIMELINE</label>
      <div class="zoom-control">
        <label translate>VIDEO_TOOL.ZOOMLEVEL</label>
        <input type="range" class="zoom-level" ng-model="zoomLevel" ng-change="changeZoomLevel($event)" ng-disabled="videoTooShortToZoom()">

        <select chosen class="workflow" id="zoomSelect"
                                        data-width="'85px'"
                                        placeholder-text-single="'{{ 'VIDEO_TOOL.ZOOM' | translate }}'"
                                        data-translated="{{ 'VIDEO_TOOL.ZOOM' | translate }}"
                                        ng-model="zoomSelected"
                                        ng-change="changeZoomSelected($event)"
                                        ng-disabled="videoTooShortToZoom()"
                                        ng-options="y.name for (x, y) in ZoomSelectOptions track by y.name">
          <option value=""></option>
        </select>
      </div>
    </div>
    <div class="field-of-vision">
      <div id="timeline-cursor" ng-style="{ left: timelineCursorPositionStyle }">
      </div>
      <div class="field" ng-class="getZoomClass()" ng-mousedown="dragTimeline($event)" ng-style="getZoomStyle()">
        <div class="boundary from">{{ formatMilliseconds(from) }}</div>
        <div class="boundary to">{{ formatMilliseconds(to) }}</div>
      </div>
    </div>
    <div class="footer" data-admin-ng-timeline-footer="">
      <span>00:00:00</span>
      <span>{{ formatMilliseconds(video.duration, false) }}</span>
    </div>
  </div>

  <div class="tracks-wrapper">
    <div class="track-container tracks">
      <div class="timeline-track" ng-repeat="track in video.tracks">

        <div class="track-toolbar">
          <label>{{ track.flavor }}</label>
          <div class="preview-toggle-control" title="{{ 'VIDEO_TOOL.PREVIEW_MODE_TOOLTIP' | translate }}">
            <input type="checkbox" ng-model="previewMode" ng-change="togglePreviewMode()">
            <label translate>VIDEO_TOOL.PREVIEW_MODE</label>
          </div>
          <!--
            <div class="track-options">
            <div class="track-options-button">
            <div class="track-options-menu">
            <a class="delete-track-button" href="javascript:;" aria-label="Delete Track"></a>
            </div>
            </div>
            </div>
          -->
        </div>

        <div class="{{wrapperClass}}">
          <div id="hover-cursor" ng-style="{ left: hoverPositionStyle, display: hoverCursorDisplay }">
          </div>
          <div class="segments" ng-style="getSegmentStyle(track)">
            <div ng-class="{'segment-container': true, displayWaveform: getSegmentWidth(segment, true) < 0.5}"
                 ng-repeat="segment in video.segments | orderBy:'start'"
                 ng-style="{ width: getSegmentWidth(segment) }">

              <div class="segment-seperator" ng-mousedown="dragSegement($event, segment)" ng-style="::getWaveformBg(track)"></div>
              <div class="segment"
                   ng-click="skipToSegment($event, segment)"
                   ng-class="getSegmentClass(segment)"
                   data-start="{{segment.start}}">

                <a title="{{'VIDEO_TOOL.SEGMENTS.REMOVE_SEGMENT' | translate}}"
                   class="remove"
                   ng-if="video.segments.length > 1"
                   ng-click="mergeSegment($event, segment)">
                </a>
                <a title="{{segment.deleted ? 'VIDEO_TOOL.SEGMENTS.SHOW_SEGMENT' : 'VIDEO_TOOL.SEGMENTS.HIDE_SEGMENT' | translate}}"
                   ng-class="{ unused: segment.deleted, used: !segment.deleted }"
                   ng-click="toggleSegment($event, segment)">
                </a>
              </div>

            </div>
          </div>
        </div>
      </div>
      <div id="cursor-track" ng-click="clickPlayTrack($event)" ng-mousemove="moveMouseOnPlayTrack($event)" ng-mouseenter="mouseEnterPlayTrack($event)" ng-mouseleave="mouseLeavePlayTrack($event)">
        <div id="cursor" ng-mousedown="dragPlayhead($event)" ng-style="{ left: positionStyle, display: cursorDisplay }">
          <div class="handle"></div>
          <div class="arrow_box">
            <a title="{{'VIDEO_TOOL.ACTIONS.SPLIT' | translate}}"
               class="split ng-scope">
            </a>
          </div>
        </div>
        <div id="cursor_fake">
          <div class="handle"></div>
        </div>
      </div>
    </div>
  </div>


</div>
